<!--
 * @Author: zhangmengqiong
 * @Date: 2021-09-09 18:09:08
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-09-10 15:28:35
-->
<template><v-chart :option="options"></v-chart></template>

<script>
import "echarts/extension/bmap/bmap";
import { mapStyleJson } from "@/contansce/index.js";
const testPoint = [
  {
    name: "厦门",
    value: [118.100459, 24.485671, 400]
  },
  {
    name: "上饶",
    value: [117.950038, 28.458848, 200]
  }
];
const testPoint2 = [
  {
    name: "三亚",
    value: [109.514536, 18.261208, 60]
  },
  {
    name: "上海",
    value: [121.476516, 31.237658, 120]
  }
];
const testPoint3 = [
  {
    name: "北京",
    value: [109.514536, 18.261208, 60]
  },
  {
    name: "浙江",
    value: [121.476516, 31.237658, 120]
  }
];
export default {
  data() {
    return {
      options: {}
    };
  },
  mounted() {
    this.options = {
      title: {
        text: "外卖销售数据大盘",
        subtext: "销售趋势统计",
        sublink: "http://localhost:8080/#/",
        left: "center"
      },
      tooltip: {},
      key: "G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb",
      bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        room: true, // 不允许缩放
        mapStyle: { styleJson: mapStyleJson }
      },
      series: [
        {
          name: "销售额",
          type: "scatter",
          coordinateSystem: "bmap",
          data: testPoint,
          encode: {
            // value 值为testPoint中下标为2 的数据
            value: 30
          },
          itemStyle: {
            // 设置点的颜色
            color: "purple"
          },
          symbolSize: function(val) {
            // 根据val 设置点的大小
            return val[2] / 5;
          },
          label: {
            // 在点上加label
            show: false,
            position: "right",
            formatter: function(v) {
              return `${v.data.name}`;
            }
          },
          emphasis: {
            // 点击时展示label
            label: {
              show: true
            }
          }
        },
        {
          name: "排名2",
          type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
          coordinateSystem: "bmap",
          data: testPoint2,
          encode: {
            // value 值为testPoint中下标为2 的数据
            value: 2
          },
          itemStyle: {
            // 设置点的颜色
            color: "purple"
          },
          symbolSize: function(val) {
            // 根据val 设置点的大小
            return val[2] / 5;
          },
          label: {
            // 在点上加label
            show: false,
            position: "right",
            formatter: function(v) {
              return `${v.data.name}`;
            }
          },
          emphasis: {
            // 点击时展示label
            label: {
              show: true
            }
          },
          hoverAnimation: true,
          rippleEffect: {
            // 涟漪特效相关配置
            brushType: "stroke" // 波纹效果
          }
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped></style>
